<template>
  <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item name="main">
      <template slot="title">
        <span class="title-tag"> <i class="el-icon-warning-outline"></i> {{title}}</span>
        <el-button style="float: right; padding: 10px 20px; font-size: 18px;" v-if="showMore" icon="el-icon-arrow-down"
          type="text">
        </el-button>
      </template>

      <div class="main">
        <slot></slot>
      </div>
      <div class="buttom">
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "DefaultTitle"
    },
    isActive: {
      type: Boolean,
      default: true
    },
    showMore: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeNames: ["main"]
    };
  },
  created() {
    if (!this.isActive) {
      this.activeNames = [];
    }
  },
  methods: {
    handleChange() {}
  }
};
</script>

<style scoped>
.title {
  align-content: left;
  background: #fff;
  border-style: none;
}

.title-tag {
  font-size: 18px;
  padding: 0px 20px;
  height: 39px;
  line-height: 39px;
  color: #1479d7;
  border-radius: 0px;
}

.main {
  border-style: solid none none none;
  border-color: #cdeefd;
  border-width: 2px;
  padding: 0px 10px;
  background: #fff;
}

.buttom {
  padding: 10px 10px;
}
</style>
